<template>
	<view>
		<u-navbar :is-back="true" title="服务详情" :background="{backgroundColor: '#00a8ff'}"></u-navbar>
		
		<view class="bgf3f5f7">
			<view class="wrap">
				<u-swiper :list="list" height="600"></u-swiper>
			</view>

			<view class="card bgFFFFFF u-m-26 u-p-20">
				<view class="money">
					¥ <text style="font-size: 45rpx;line-height: 80rpx;">19999</text>
					<text style="float: right;" class="small">月销量5024件</text>
				</view>
				<view class="title">
					HeaQ0营养素100粒q10软胶囊保健品
				</view>
			</view>
			<view class="card bgFFFFFF u-m-26 u-p-20">
				<view class="title">
					服务流程 <text class="small" style="padding-left: 10rpx;">时长约1小时30分钟</text>
				</view>
				<view class="">
					<ul style="padding: 26rpx;">
						<li class="li">
							<text>前台挂号</text>
							<view style="text-align: right;width: 70%;display: inline-block;">----------------------------------</view>
							<text style="float: right;">5分钟</text>
						</li>
						<li class="li">
							<text>面诊设计</text>
							<view style="text-align: right;width: 70%;display: inline-block;">----------------------------------</view>
							<text style="float: right;">30分钟</text>
						</li>
					</ul>
				</view>
			</view>
			<view class="card bgFFFFFF u-m-26 u-p-20">
				<view class="title u-p-b-20">
					购买流程
				</view>
				<u-time-line>
						<u-time-line-item nodeTop="2">
							<!-- 此处自定义了左边内容，用一个图标替代 -->
							<template v-slot:node>
								<view class="u-node" style="background: #eedafd;">
									<u-icon name="pushpin-fill" color="#ac73dd" :size="24"></u-icon>
								</view>
							</template>
							<template v-slot:content>
								<view>
									<view class="u-order-title">选择服务项目</view>
									<view class="u-order-time">选择您需要的服务项目</view>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item>
							<template v-slot:node>
								<view class="u-node" style="background: #eedafd;">
									<u-icon name="pushpin-fill" color="#ac73dd" :size="24"></u-icon>
								</view>
							</template>
							<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
							<template v-slot:content>
								<view>
									<view class="u-order-title">确认订单</view>
									<view class="u-order-time">选择医生 > 选择时间 > 选择医院</view>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item>
							<template v-slot:node>
								<view class="u-node" style="background: #eedafd;">
									<u-icon name="pushpin-fill" color="#ac73dd" :size="24"></u-icon>
								</view>
							</template>
							<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
							<template v-slot:content>
								<view>
									<view class="u-order-title">支付预约金</view>
									<view class="u-order-time">支付完成、到所预约医院进行面诊</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
			</view>
			
			<u-button type="primary" style="width: 90%;margin: 20rpx auto;" @click="add()">添加</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					}
				]
			}
		},
		onShow() {
			console.log("服务详情");
		},
		methods: {
			
			add(){
				console.log("执行了添加事件")
			},
			
			
			
			
			
			
			
			
			
			
			
			
			openinfo(url) {
				uni.navigateTo({
					url: url,
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.card {
		border-radius: 15rpx;

		.money {

			font-size: 30rpx;
			width: 100%;
			color: #e889b1;

		}

		.small {
			
			color: #d0cfd2;
			font-size: 20rpx;
		}

		.title {
			font-weight: 700;
		}
		.li{
			font-size: 24rpx;
			color: #8a8a8c;
		}
		
		.u-node {
				width: 44rpx;
				height: 44rpx;
				border-radius: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #d0d0d0;
			}
			
			.u-order-title {
				color: #333333;
				font-weight: bold;
				font-size: 26rpx;
			}
			
			.u-order-desc {
				color: rgb(150, 150, 150);
				font-size: 28rpx;
				margin-bottom: 6rpx;
			}
			
			.u-order-time {
				color: rgb(200, 200, 200);
				font-size: 26rpx;
			}
	}
	
</style>
